<template>
    <div class="contentCom-wrap">
        <p>为你推荐</p>
        <div class="content">
        <div class="list">
            <van-image class="img" id="one-imgs" fit="cover" radius="10px" :src="firstPic" @click="go()"></van-image>
        </div>

        <div class="list" v-for="(item,index) in listShow" :key='index' @click="detailList(item.ids)">
            <van-image
                class="img"
                lazy-load
                :src="item.haibao"
            />
            <div class="title-wrap">{{item.title1}}</div>
            <div class="price-wrap">
                <span>{{item.timer}}</span>
                <span>{{item.price}}</span>
            </div>
        </div>
    </div>
    </div>
</template>

<script>

export default {
  props:['listShow'],
  name: "WorkspaceJsonRecommect",

  data() {
    return {
        firstPic:require('../../assets/loginImg/bac-bg.jpg')
    };
  },
  components:{
  },

  mounted() {
      
  },

  methods: {
    detailList(ids){
      this.$router.push({path:'/showDetail',query:{ids}})
    },
    // 为奥运喝彩
    go(){
      this.$router.push('/home_detail?mid=10')
    }
  },
};
</script>

<style lang="scss" scoped>
.contentCom-wrap {
    background: #fff;
  padding: 10px;
  box-sizing: border-box;
  >p{
      margin-top:-5px ;
      font-weight: bold;
      font-size: 22px;
  }
  .content {
    column-count: 2;
    .list {
      margin-bottom: 10px;
      border-radius: 8px;
      overflow: hidden;
      break-inside: avoid;
      width: 330rpx;
      border: 1px solid #f0f0f0;
      box-shadow: 1px 1px 5px #e7e7e7;
      .img {
        width: 100%;
        border-radius: 6rpx;
      }
      .title-wrap{
          padding: 5px;
          box-sizing: border-box;
          font-size: 12px;
      }
      .price-wrap{
          >span:nth-child(1){
              display: block;
              color: rgb(182, 182, 182);
              font-size: 10px;
              padding-left:5px ;
          }
          >span:nth-child(2){
              display: block;
              color: rgb(255, 13, 13);
              font-size: 15px;
              padding-left:5px ;
          }
      
      }

      .title {
          text-align: center;
        padding: 5px 5px 6px 5px;
        box-sizing: border-box;
        font-size: 15px;
        color: #d61313;
        font-weight: bold;
      }
      .con {
        margin: 15rpx;
        margin-top: 20rpx;
        display: flex;
        font-size: 26rpx;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}
#one-imgs{
    height: 160px;
    border-radius:10px ;
}

</style>